<template>
  <!-- 整体 -->
  <div class="container">

    <el-card>
      <!-- 说明加按钮 -->
      <div class="explain">
        <span style="font-size: 12px; color: pink"
          >说明：目前支持学科和关键字条件筛选</span
        >
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- 选择框 -->
      <el-form :model="ruleForm" label-width="80px" class="ruleForm">
        <el-row class="row-bc">
          <el-col :span="6">
            <el-form-item label="学科" size="small">
              <el-select
                v-model="ruleForm.subjectValue"
                placeholder="请选择"
                style="width: 100%"
                @change="getCatalogueList(), getTagList()"
              >
                <el-option
                  v-for="item in subject"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" size="small">
              <el-select
                v-model="ruleForm.catalogueValue"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in catalogueList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" size="small">
              <el-select
                v-model="ruleForm.tagValue"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in tagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" size="small">
              <el-input
                v-model="ruleForm.input"
                placeholder="根据题干搜索"
                style="width: 100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型" size="small">
              <el-select
                v-model="ruleForm.questionTypeValue"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" size="small">
              <el-select
                v-model="ruleForm.difficultyValue"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" size="small">
              <el-select
                v-model="ruleForm.directionValue"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" size="small">
              <el-select
                v-model="ruleForm.userValue"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.value"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注" size="small">
              <el-input
                v-model="ruleForm.TopicNotes"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" size="small">
              <el-input
                v-model="ruleForm.EnterpriseAbbreviation"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" size="small">
              <el-select
                v-model="ruleForm.provincesValue"
                placeholder="请选择"
                style="width: 48%; margin-right: 2%"
                @change="getCitysList()"
              >
                <el-option
                  v-for="item in provincesList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="ruleForm.citysValue"
                placeholder="请选择"
                style="width: 50%"
              >
                <el-option
                  v-for="item in citysList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" style="text-align: right">
              <el-button size="small" @click="ruleForm = {}">清除</el-button>
              <el-button type="primary" size="small" @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 提示 -->
      <el-alert
        :title="`数据一共 ${counts} 条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 列表区域 -->
      <el-table
        id="sun-su"
        :data="tableData"
        :header-cell-style="{
          background: '#fafafa',
          borderBottom: '2px solid #e8e8e8',
        }"
      >
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" min-width="80">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" min-width="80">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          min-width="80"
          :formatter="FquestionType"
        >
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <template v-slot="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="180"
          :formatter="Ftime"
        >
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          min-width="80"
          :formatter="Fdifficulty"
        >
        </el-table-column>
        <el-table-column prop="creator" label="录入人" min-width="80">
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="180">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              size="small"
              plain
              circle
              icon="el-icon-view"
              title="预览"
              @click="preview(row)"
            ></el-button>
            <el-button
              type="success"
              size="small"
              plain
              circle
              icon="el-icon-edit"
              title="修改"
              @click="revise(row)"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              plain
              circle
              icon="el-icon-delete"
              title="删除"
              @click="del(row)"
            >
            </el-button>
            <el-button
              type="warning"
              size="small"
              plain
              circle
              icon="el-icon-check"
              title="加入精选"
              @click="join(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="requestParameters.pagesize"
          :total="counts"
          layout="  prev, pager, next,sizes  , jumper"
          style="margin-top: 20px"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 预览弹出框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="6">
          【题型】：
          {{
            previewList.questionType == 1
              ? "单选题"
              : previewList.questionType == 2
              ? "多选题"
              : "简答题"
          }}
        </el-col>
        <el-col :span="6">
          【编号】：
          {{ previewList.id }}
        </el-col>
        <el-col :span="6">
          【难度】：
          {{
            previewList.difficulty == 1
              ? "简单"
              : previewList.questionType == 2
              ? "一般"
              : "困难"
          }}
        </el-col>
        <el-col :span="6">【标签】：{{ previewList.tags }}</el-col>
        <el-col :span="6">【学科】：{{ previewList.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ previewList.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ previewList.direction }}</el-col>
      </el-row>
      <hr />
      【题干】：
      <div style="color: blue" v-html="previewList.question"></div>
      <!-- 单选 -->
      <div class="SingleChoice" v-if="previewQuestionType == 1">
        <p style="padding-bottom: 5px">
          单选题 选项：（以下选中的选项为正确答案）
        </p>
        <div
          style="padding: 8px 0px"
          v-for="item in previewList.options"
          :key="item.id"
        >
          <el-radio v-model="radio" :label="item.isRight" @input="radio = 1">{{
            item.title
          }}</el-radio>
        </div>
      </div>
      <!-- 多选 -->
      <div class="MultipleChoice" v-else-if="previewQuestionType == 2">
        <p style="padding-bottom: 5px">
          多选题 选项：（以下选中的选项为正确答案）
        </p>
        <el-checkbox-group v-model="checked">
          <div
            style="padding: 8px 0px"
            v-for="item in previewList.options"
            :key="item.id"
          >
            <el-checkbox :label="item.title" disabled>{{
              item.title
            }}</el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
      <!-- 简答 -->
      <div class="ShortAnswer" v-else-if="previewQuestionType == 3"></div>
      <hr />
      【参考答案】：
      <el-button type="danger" size="small" @click="videoShow = true"
        >视频答案预览</el-button
      >
      <div class="video" v-show="videoShow">
        <video :src="previewList.videoURL" controls="controls"></video>
      </div>
      <hr />
      【答案解析】：
      <div style="display: inline-block" v-html="previewList.answer"></div>
      <hr />
      【题目备注】：
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入获取区城市
// import { provinces, citys } from '@/api/hmmm/cirys.js'
// 获取基础题库列表
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
// 获取 难度，题型，方向，精品审核，发布状态，
// import { difficulty, questionType, direction, chkType, publishType } from '@api/hmmm/constants'
import { difficulty, direction, questionType } from '@/api/hmmm/constants'
// 城市列表
import { datas, provinces, citys } from '@/api/hmmm/citys'
// 获取学科列表
import { simple } from '@/api/hmmm/subjects'
// 目录列表
import { simple as catalogue } from '@/api/hmmm/directorys'
// 标签列表
import { simple as tag } from '@/api/hmmm/tags'
// 录入人列表
import { simple as userSimple } from '@/api/base/users'

// 时间格式化函数
import { parseTime } from '@/utils/index'

export default {
  data () {
    return {
      videoShow: false,
      // 预览列表
      previewList: [],
      // 单选，多选
      isChecked: '',
      previewQuestionType: '',
      checked: [],
      radio: 1,
      dialogVisible: false,
      datas: [],
      difficulty: [],
      ruleForm: {
        catalogueValue: '',
        tagValue: '',
        provincesValue: '',
        citysValue: ''
      },
      // 方向
      direction: [],
      // 学科
      subject: [],
      // 目录
      catalogueList: [],
      // 标签
      tagList: [],
      // 题型
      questionType: [],
      // 录入人
      userList: [],
      // 城市
      provincesList: [],
      citysList: [],
      input: '',
      requestParameters: {
        page: 1,
        pagesize: 5
      },
      catalogueTable: '',
      value: '',
      // 数据总数
      counts: 0,
      // 列表
      tableData: []
    }
  },
  created () {
    this.difficulty = difficulty
    this.direction = direction
    this.questionType = questionType
    this.provincesList = provinces()
    this.getlist('asdjkn', datas)
    this.getSubList()
    this.getUserList()
  },
  methods: {
    handleCheckedCitiesChange (e) {
      // this.previewList.options.forEach((item, index) => {
      //   if (item.isRight == 1) {

      //   }
      // });
      console.log(e)
    },
    // 弹出框关闭
    handleClose () {
      this.dialogVisible = false
      this.videoShow = false
    },
    // 预览
    async preview (row) {
      this.dialogVisible = true
      row = {
        id: row.id
      }
      const { data } = await detail(row)
      this.previewList = Object.freeze(data)
      this.previewQuestionType = data.questionType
      if (this.previewQuestionType === 2) {
        this.previewList.options.forEach((item) => {
          if (item.isRight === 1) {
            this.checked.push(item.title)
            // this.isChecked = this.checked.length;
          }
        })
      }
      console.log(this.previewList)
    },
    // 修改
    revise (row) {
      this.$router.push('/questions/new?id=' + `${row.id}`)
    },
    // 删除
    del (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          remove(row).then(() => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getlist()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 加入精选
    join (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          const data = row
          data.choiceState = '1'
          console.log(data)
          choiceAdd(data).then(() => {
            this.$message({
              message: '加入精选成功',
              type: 'success'
            })
            this.getlist()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入精选'
          })
        })
    },
    // 获取城市下地区列表
    getCitysList () {
      this.citysList = citys(this.ruleForm.provincesValue)
      this.ruleForm.citysValue = ''
    },
    // 获取录入人信息
    async getUserList () {
      try {
        const { data } = await userSimple()
        this.userList = data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取学科列表
    async getSubList () {
      try {
        const { data } = await simple()
        this.subject = data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取目录列表
    async getCatalogueList () {
      try {
        //  清除
        const { data } = await catalogue({
          subjectID: this.ruleForm.subjectValue
        })
        this.catalogueList = data
        this.ruleForm.catalogueValue = ''
      } catch (error) {
        console.log(error)
      }
    },
    // 获取标签列表
    async getTagList () {
      try {
        const { data } = await tag({ subjectID: this.ruleForm.subjectValue })
        this.tagList = data
        console.dir(this.ruleform)
        this.ruleForm.tagValue = ''
      } catch (error) {
        console.log(error)
      }
    },
    // 获取列表
    async getlist () {
      // api
      const { data } = await list(this.requestParameters)
      this.counts = data.counts
      this.tableData = data.items
    },
    // 搜索
    search () {
      try {
        const data1 = this.requestParameters
        if (this.ruleForm.subjectValue) {
          data1.subjectID = this.ruleForm.subjectValue
        }
        if (this.ruleForm.input) data1.keyword = this.ruleForm.input
        this.getlist(data1)
      } catch (error) {
        console.log(error)
      }
    },
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      this.getlist(this.requestParameters)
    },
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getlist(this.requestParameters)
    },
    // 表格格式化
    FquestionType (row) {
      for (const item of questionType) {
        if (row.questionType === item.value) {
          return item.label
        }
      }
    },
    Fdifficulty (row) {
      for (const item of difficulty) {
        if (row.difficulty === item.value) {
          return item.label
        }
      }
    },
    Ftime (row) {
      let time = row.addDate
      time = parseTime(time)
      return time
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 0 10px;
  margin: 10px 0;
}
.explain {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
// .row-bc {
//   text-align: right;
//   font-weight: 600;
//   color: #606266;
// }
.el-alert {
  margin-bottom: 15px;
}
// #sun-su {
//   margin: 10px;
// }
.el-table__header-wrapper {
  background-color: #f4f4f5;
}
.block {
  text-align: right;
}
//弹出框
:deep(.el-dialog__footer) {
  text-align: right;
}
:deep(.el-dialog__body .el-col) {
  padding: 10px 0;
}
//多选框
:deep(.is-disabled .is-checked .el-checkbox__inner) {
  background-color: #409eff;
  border-color: #409eff;
  cursor: pointer;
}
:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #409eff;
  cursor: pointer;
}
:deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {
  color: #606266;
  cursor: pointer;
}
:deep(.el-checkbox__input.is-disabled .el-checkbox__inner::after) {
  cursor: pointer;
}
:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
  cursor: pointer;
}
//视频
.video {
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
//分页
:deep(.el-pagination__jump) {
  margin-left: 0;
}
</style>
